<template>
	<div
		class="account-user flex items-center"
		:class="{ 'cursor-pointer': toProfile }"
		@click="onClick">
		<account-vip :level="vip" :key="vip"></account-vip>
		<div class="truncate">{{ nickName || userName }}</div>
	</div>
</template>

<script setup lang="ts">
import AccountVip from '../account-vip/index.vue'
import { PropType } from 'vue'
import { UpSwitchTabsEnum } from '@/components/up'
import { useProfileStore } from '@/store'

const props = defineProps({
	vip: {
		type: Number
	},
	nickName: {
		type: String,
		default: ''
	},
	userName: {
		type: String,
		default: ''
	},
	toProfile: {
		type: Boolean,
		default: true
	},
	userId: {
		type: [String, Number]
	},
	toProfileTab: {
		type: String as PropType<UpSwitchTabsEnum>,
		default: UpSwitchTabsEnum.sports
	}
})

const profileStore = useProfileStore()

const onClick = () => {
	if (!props.toProfile) {
		return
	}
	const userId = props.userId || profileStore.userInfo?.userId
	if (!userId) {
		return
	}
	profileStore.showProfile({ show: true, userId, tab: props.toProfileTab })
}
</script>
